<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>步步街Liquid布局L模式演示</title>
<link rel="stylesheet" href="../liquid_L.css" />
<style type="text/css">
body{font-size:14px;line-height:20px;}
h1{ line-height:2em;margin:0; }
div.content {
	display:block;
	border:1px solid #666666;
	overflow:hidden;
	text-align:center;
	background:#F1F1F1;
	font-weight: bold;
	background:#F9F9F4 url(../img/grid_text.png) 1px 0 repeat;
	margin-right:0px;
}
.wrapping {
	padding:3px 0;
}
.nmn .ming{color:red;}
address *{vertical-align:middle;font-family:Dotum;}
</style>
</head>
<body>
<div class="wrapping m">
  <h1>步步街Liquid布局L模式演示</h1>
</div>
<hr />
<div class="wrapping m">
  <div class="ming"><div class="content">m-default</div></div>
</div>
<div class="wrapping mn">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n-default</div></div>
</div>
<div class="wrapping nm">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n-default</div></div>
</div>
<div class="wrapping mnn">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n1-default</div></div>
  <div class="n2"><div class="content">n2-default</div></div>
</div>
<div class="wrapping nmn">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n1-default</div></div>
  <div class="n2"><div class="content">n2-default</div></div>
</div>
<div class="wrapping nnm">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n1-default</div></div>
  <div class="n2"><div class="content">n2-default</div></div>
</div>
<hr />
<div class="wrapping nm">
  <div class="ming w-23-24"><div class="content">m(23/24)</div></div>
  <div class="n1 w-1-24"><div class="content">n(1/24)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-11-12"><div class="content">m(11/12)</div></div>
  <div class="n1 w-1-12"><div class="content">n(1/12)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-7-8"><div class="content">m(7/8)</div></div>
  <div class="n1 w-1-8"><div class="content">n(1/8)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-5-6"><div class="content">m(5/6)</div></div>
  <div class="n1 w-1-6"><div class="content">n(1/6)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-19-24"><div class="content">m(19/24)</div></div>
  <div class="n1 w-5-24"><div class="content">n(5/24)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-3-4"><div class="content">m(3/4)</div></div>
  <div class="n1 w-1-4"><div class="content">n(1/4)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-17-24"><div class="content">m(17/24)</div></div>
  <div class="n1 w-7-24"><div class="content">n(7/24)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-2-3"><div class="content">m(2/3)</div></div>
  <div class="n1 w-1-3"><div class="content">n(1/3)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-5-8"><div class="content">m(5/8)</div></div>
  <div class="n1 w-3-8"><div class="content">n360</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-7-12"><div class="content">m(7/12)</div></div>
  <div class="n1 w-5-12"><div class="content">n(5/12)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-13-24"><div class="content">m(13/24)</div></div>
  <div class="n1 w-11-24"><div class="content">n(11/24)</div></div>
</div>
<div class="wrapping nm">
  <div class="ming w-1-2"><div class="content">m(1/2)</div></div>
  <div class="n1 w-1-2"><div class="content">n(1/2)</div></div>
</div>
<hr />
<div class="wrapping mn">
  <div class="ming w-23-24"><div class="content">m(23/24)</div></div>
  <div class="n1 w-1-24"><div class="content">n(1/24)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-11-12"><div class="content">m(11/12)</div></div>
  <div class="n1 w-1-12"><div class="content">n(1/12)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-7-8"><div class="content">m(7/8)</div></div>
  <div class="n1 w-1-8"><div class="content">n(1/8)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-5-6"><div class="content">m(5/6)</div></div>
  <div class="n1 w-1-6"><div class="content">n(1/6)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-19-24"><div class="content">m(19/24)</div></div>
  <div class="n1 w-5-24"><div class="content">n(5/24)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-3-4"><div class="content">m(3/4)</div></div>
  <div class="n1 w-1-4"><div class="content">n(1/4)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-17-24"><div class="content">m(17/24)</div></div>
  <div class="n1 w-7-24"><div class="content">n(7/24)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-2-3"><div class="content">m(2/3)</div></div>
  <div class="n1 w-1-3"><div class="content">n(1/3)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-5-8"><div class="content">m(5/8)</div></div>
  <div class="n1 w-3-8"><div class="content">n360</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-7-12"><div class="content">m(7/12)</div></div>
  <div class="n1 w-5-12"><div class="content">n(5/12)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-13-24"><div class="content">m(13/24)</div></div>
  <div class="n1 w-11-24"><div class="content">n(11/24)</div></div>
</div>
<div class="wrapping mn">
  <div class="ming w-1-2"><div class="content">m(1/2)</div></div>
  <div class="n1 w-1-2"><div class="content">n(1/2)</div></div>
</div>
<hr />
<div class="wrapping mnn">
  <div class="ming w-1-3">
    <div class="content">m(1/3)
      <hr />
      <div>demo</div>
    </div>
  </div>
  <div class="n1 w-1-3">
    <div class="content">n(1/3)
      <hr />
      <div>demo</div>
      <div>demo</div>
    </div>
  </div>
  <div class="n2 w-1-3">
    <div class="content">n(1/3)
      <hr />
      <div>demo</div>
      <div>demo</div>
      <div>demo</div>
    </div>
  </div>
</div>
<div class="wrapping nmn">
  <div class="ming w-1-3" style="left:33.3333%; color:red;">
    <div class="content">m(1/3)
      <hr />
      <div>demo</div>
      <div>demo</div>
    </div>
  </div>
  <div class="n1 w-1-3">
    <div class="content">n(1/3)
      <hr />
      <div>demo</div>
    </div>
  </div>
  <div class="n2 w-1-3">
    <div class="content">n(1/3)
      <hr />
      <div>demo</div>
      <div>demo</div>
      <div>demo</div>
    </div>
  </div>
</div>
<div class="wrapping nnm">
  <div class="ming w-1-3">
    <div class="content">m(1/3)
      <hr />
      <div>demo</div>
      <div>demo</div>
      <div>demo</div>
    </div>
  </div>
  <div class="n1 w-1-3">
    <div class="content">n(1/3)
      <hr />
      <div>demo</div>
    </div>
  </div>
  <div class="n2 w-1-3">
    <div class="content">n(1/3)
      <hr />
      <div>demo</div>
      <div>demo</div>
    </div>
  </div>
</div>
<hr />
<div class="wrapping mnn">
  <div class="ming w-1-2"><div class="content">m(1/2)</div></div>
  <div class="n1 w-1-4"><div class="content">n(1/4)</div></div>
  <div class="n2 w-1-4"><div class="content">n(1/4)</div></div>
</div>
<div class="wrapping nmn">
  <div class="ming w-1-2" style="left:25%; color:red;"><div class="content">m(1/2)</div></div>
  <div class="n1 w-1-4"><div class="content">n(1/4)</div></div>
  <div class="n2 w-1-4"><div class="content">n(1/4)</div></div>
</div>
<div class="wrapping nnm">
  <div class="ming w-1-2"><div class="content">m(1/2)</div></div>
  <div class="n1 w-1-4"><div class="content">n(1/4)</div></div>
  <div class="n2 w-1-4"><div class="content">n(1/4)</div></div>
</div>
<hr />
<div class="wrapping">
  <div id="colophon">
    <address style="text-align:center;">
      <img src="../img/logo_16px.gif" alt="" />&nbsp;<em>Copyright ©</em> <span><a href="http://www.bubujie.net/" target="_blank">步步街工作室</a> 2008-2012 All Rights Reserved.</span>
    </address>
  </div>
</div>
</body>
</html>
